<template>
  <div class="demo-title">picker/demo3</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="cascade.show()">级联选择</div>
  </div>
  <Picker v-model:visible="cascade.visible" v-model="cascade.value" :columns="cascade.columns" @confirm="cascade.onConfirm" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Picker from '@sscd-mobile/picker'
  const cascade = reactive({
    visible: false,
    show: () => cascade.visible = true,
    value: ['HaiNan', 'SanYa', 'TianYa'],
    columns: [
      {
        text: '广东省',
        value: 'GuangDong',
        children: [
          {
            text: '广州市',
            value: 'GuangZhou',
            children: [
              { text: '天河区', value: 'TianHe' },
              { text: '白云区', value: 'BaiYun' },
              { text: '南沙区', value: 'NanSha' }
            ]
          },
          {
            text: '深圳市',
            value: 'ShenZhen',
            children: [
              { text: '罗湖区', value: 'LuoHu' },
              { text: '福田区', value: 'FuTian' },
              { text: '宝安区', value: 'BaoAn' }
            ]
          }
        ]
      },
      {
        text: '海南省',
        value: 'HaiNan',
        children: [
          {
            text: '海口市',
            value: 'HaiKou',
            children: [
              { text: '龙华区', value: 'LongHua' },
              { text: '秀英区', value: 'XiuYing' },
              { text: '美兰区', value: 'MeiLan' }
            ]
          },
          {
            text: '三亚市',
            value: 'SanYa',
            children: [
              { text: '海棠区', value: 'HaiTang' },
              { text: '天涯区', value: 'TianYa' },
              { text: '崖州区', value: 'YaZhou' }
            ]
          }
        ]
      }
    ],
    onConfirm: (res) => console.log('onConfirm: ', res)
  })
</script>

<style scoped></style>
